<template>
  <div class="overview-container">
    <el-card class="overview-card">
      <div class="overview-item">
        <div class="item-icon late-icon">
          <i class="el-icon-user" style="font-size: 24px; color: #ffffff"></i>
        </div>
        <div class="item-content">
          <div class="item-value">{{ overviewData.total }}</div>
          <div class="item-label">应归人数(个)</div>
        </div>
      </div>
    </el-card>

    <el-card class="overview-card">
      <div class="overview-item">
        <div class="item-icon actual-icon">
          <i class="el-icon-check" style="font-size: 24px; color: #ffffff"></i>
        </div>
        <div class="item-content">
          <div class="item-value">{{ overviewData['早出'] }}</div>
          <div class="item-label">实归人数(个)</div>
        </div>
      </div>
    </el-card>

    <el-card class="overview-card">
      <div class="overview-item">
        <div class="item-icon abnormal-icon">
          <i class="el-icon-warning" style="font-size: 24px; color: #ffffff"></i>
        </div>
        <div class="item-content">
          <div class="item-value">{{ overviewData['无通行数据'] }}</div>
          <div class="item-label">异常人数(个)</div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  props: {
    overviewData: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      // shouldReturnCount: 23083,
      // actualReturnCount: 23083,
      // abnormalCount: 23083
    };
  },
  watch: {
    // overviewData: {
    //   handler(newVal) {
    //     if (newVal && Object.keys(newVal).length > 0) {
    //       this.updateOverviewData(newVal);
    //     }
    //   },
    //   deep: true
    // }
  },
  mounted() {
    // this.loadOverviewData();
  },
  methods: {
    // loadOverviewData() {
    //   // 模拟数据加载
    //   setTimeout(() => {
    //     this.updateOverviewData(this.overviewData);
    //   }, 100);
    // },
    // updateOverviewData(data) {
    //   if (data.shouldReturnCount) this.shouldReturnCount = data.shouldReturnCount;
    //   if (data.actualReturnCount) this.actualReturnCount = data.actualReturnCount;
    //   if (data.abnormalCount) this.abnormalCount = data.abnormalCount;
    // }
  }
};
</script>

<style scoped>
.overview-container {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.overview-card {
  flex: 1;
  margin-right: 20px;
  height: 120px;
  display: flex;
  align-items: center;
}

.overview-card:last-child {
  margin-right: 0;
}

.overview-item {
  display: flex;
  align-items: center;
  width: 100%;
}

.item-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20px;
}

.late-icon {
  background-color: #e6a23c;
}

.actual-icon {
  background-color: #4fd496;
}

.abnormal-icon {
  background-color: #f56c6c;
}

.item-content {
  flex: 1;
}

.item-value {
  font-size: 28px;
  font-weight: bold;
  color: #303133;
  line-height: 1;
}

.item-label {
  font-size: 14px;
  color: #909399;
  margin-top: 8px;
}
</style>
